
<template>
  <div class="header_4">
    <div id="header_5">
      <div id="wenzi_5">疫情追踪</div>
    </div>
    <div id="abb" style="height: 400px"></div>
    <div id="acc" style="height: 400px"></div>
   

    <div id="ag" style="height: 400px"></div>
    <div class="wen">
      <div>省区疫情</div>
    </div>

    

    <span>请输入省区:</span>
    <el-input
      style="width: 180px;"
      v-model="q.province"
      placeholder="请输入内容"
    ></el-input>
    <el-button @click="selectData" icon="el-icon-search" circle style="color:blue;"></el-button>

    <el-table :data="gd" style="width:100%;">
        <el-table-column prop="province" label="省区" coler="blue">
      </el-table-column>
      <el-table-column prop="nowConfirm" label="现有确诊" style="margin-left:20px;">
      </el-table-column>
      <el-table-column prop="confirmAdd" label="累计确诊" style="margin-left:20px;">
      </el-table-column>
      <el-table-column prop="dead" label="死亡" style="margin-left:20px;">
      </el-table-column>
      <el-table-column prop="heal" label="治愈">
      </el-table-column>
    </el-table>

    
     <div class="gaodu">
      <div>省区定点医院</div>
    </div>

    
      <el-table :data="clinic" style="width: 100%">
      <el-table-column prop="province" label="省区">
      </el-table-column>
      <el-table-column prop="name" label="医院"> </el-table-column>
    </el-table>

    <div class="gaodu">
      <div>省区疫情防控重要报告</div>
    </div>
    <el-table :data="wz" style="width: 100%">
      
      <el-table-column prop="wenzhang" label="文章"> </el-table-column>
    </el-table>

     
  </div>
</template>
<script>
import jt1 from "../../assets/404_images/jt1.json";
import jt2 from "../../assets/404_images/jt2.json";
import jt3 from "../../assets/404_images/jt3.json";
export default {
  data() {
    return {
      jt1: JSON.parse(jt1.data),
      jt2,
      jt3,
      article: {},
      global: [],
      q: {},
      clinic: [],
      test: [],
      test1: [],
      gd1: {},
      gd: [],
      wz:[]
    };
  },
  created() {
    console.log(this.jt1);
    console.log(this.jt2);
    console.log(this.jt3);
    this.findData();
    
  },
  mounted() {
    this.initEchart();
    this.initEchart1();
    this.initEchart2();

  },
  methods: {
    selectData() {
      this.clinic = [];
      this.gd = [];
      this.jt1.foreignList.map((item) => {
        if (item.name == this.article.name) {
          // console.log(item);
          this.global.push(item);
        }
      }),
        this.jt2.data.map((item) => {
          if (item.province == this.q.province) {
            // console.log(item);
            this.clinic.push(item);
          }
        });
      this.jt3.data.map((item) => {
        if (item.province == this.q.province) {
          // console.log(item);
          // console.log(gd);
          this.gd.push(item);
        }
      });
       this.jt3.data.map((item) => {
        if (item.province == this.q.province) {
          // console.log(item);
          // console.log(gd);
          this.wz.push(item);
        }
      });
    },
    findData() {
      let res1 = this.jt1.countryAddConfirmRankList.map((item) => {
        return {
          value: item.addConfirm,
          name: item.nation,
        };
      });
      this.test = res1;
      // console.log(this.test,'[[[[[');
      // this.initEchart();
      let res2 = this.jt1.countryConfirmWeekCompareRankList.map((item) => {
          return {
            value: item.rate,
            name: item.nation,
          };
      });
      this.test1 = res2;

      let res3=this.jt3.data.map((item)=>{
        if(item.nowConfirm>30){
          return{
            value: item.nowConfirm,
            name: item.province,
          }
        }
      });
      this.test2=res3;
      console.log(res3);
    },
    initEchart2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("ag"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "高确诊省区",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          top: "bottom",
          data: [
            "rose1",
            "rose2",
            "rose3",
            "rose4",
            "rose5",
            "rose6",
            "rose7",
            "rose8",
          ],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "area",
            data:this.test2,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEchart1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("acc"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "高概率确诊国家",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          top: "bottom",
          data: [
            "rose1",
            "rose2",
            "rose3",
            "rose4",
            "rose5",
            "rose6",
            "rose7",
            "rose8",
          ],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "area",
            data:this.test1,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    // 初始华图表
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("abb"));

      // 指定图表的配置项和数据
      var option = {
        backgroundColor: "#2c343c",

        title: {
          text: "高确诊国家",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: this.test.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#header_5 {
  height: 150px;
  width: 100%;
  background-color: cadetblue;
}
#wenzi_5{
  text-align: center;
  line-height: 150px;
  font-size: 35px;
  color:whitesmoke;
}
#abb{
  width: 630px;
  float: left;
}
#acc{
  width: 630px;
  float: left;
  /* margin-bottom: 50px; */
}
#ag{
  width: 100%;
  float: left;
  /* background-color: aqua; */
  margin-bottom: 50px;
}

.gaodu{
  height: 70px;
  width: 100%;
  background-color: cadetblue;
}
.gaodu div{
  color: aliceblue;
  line-height: 70px;
  font-size: 20px;
  color:white;
  text-align: center;

}
.wen div{
  text-align: center;
  color: cadetblue;
  font-size: 32px;
}
.header_4 span{
  color: cornflowerblue;
}

</style>